<template>
  <div class="the-map-component">
    <!-- <poi-tsne-trans></poi-tsne-trans> -->
    <poi></poi>
    <echarts-player-routes></echarts-player-routes>
    <!-- <echarts-radar></echarts-radar> -->
    <touying></touying>
    <!-- <parallel-axis></parallel-axis> -->
    <cluster0920></cluster0920>
    <!-- <hangxian-juli></hangxian-juli> -->
    <grid-safezone-heatmap></grid-safezone-heatmap>
    <!-- <echarts-traclus></echarts-traclus> -->
    
    <echarts-radar-vone></echarts-radar-vone>
    <!-- <kill-in-zone></kill-in-zone> -->
    
    <grid-kill-heatmap></grid-kill-heatmap>
    <!-- <v-stage ref="ref-stage" :config="stageConfig">
      <v-layer>
        <v-image
          :config="{
          image:mapImage,
          width:mapSize,
          height:mapSize
        }"
        ></v-image>
        <!-- <v-rect
          :config="{
          x: 0,
          y: 0,
          width: 100,
          height: 100,
          fill: 'red',
          shadowBlur: 10
        }"
        />
      </v-layer>
      <v-layer ref="lines-layer"></v-layer>
    </v-stage> -->
    <hr><br>
    <!-- <event-time></event-time> -->
    
  </div>
</template>

<script>
import axios from "axios";
import konva from "konva";
import { map, clamp, sortBy } from "lodash";
import EventTime from "./EventTime";
import GridKillHeatmap from "./KonvaDesertKillGridHeatmap"
import GridSafezoneHeatmap from "./KonvaDesertSafezoneGridHeatmap"
import KillInZone from "./KonvaDesertKillInZone"
import EchartsRadar from "./EchartsRadar"
import EchartsRadarVone from "./EchartsRadar-v1"
import EchartsPlayerRoutes from "./EchartsPlayerRoutes"
import EchartsTraclus from "./EchartsTraclus";
import Cluster0920 from "./Cluster0920"
import ParallelAxis from "./ParallelAxis"
import HangxianJuli from "./HangxianJuli"
import Touying from "./Touying"
import Poi from "./POI"
import PoiTsneTrans from "./PoiTsneTrans"

// const KonvaLayer = konva.Layer;
const DesertKillEvents =
  "https://du.hupucdn.com/miaohong/post/photo/prod/6566412/1.590941499954153E12";
const Desert_Main_Squad_KillGroggyBluezone_II = 
"http://m.tuniucdn.com/fb2/t1/G6/M00/A2/C3/Cii-TF7vjiSAHbEfAlgM7wmWiUc05.json"
const Desert_Squad_KillGroggyBluezone =
  "http://m.tuniucdn.com/fb2/t1/G6/M00/D1/24/Cii-U17X2myIJHNhAESzlWMWjvoAANCkwJOf6UARLOt55.json";
const Savage_Squad_KillGroggyBluezone =
  "http://m.tuniucdn.com/fb2/t1/G6/M00/D1/24/Cii-TF7X2myIUzbmAEmx-AoHvcIAANCkwIEzZUASbIQ72.json";
  const Savage_Main_Squad_KillGroggyBluezone_II = 
  "http://m.tuniucdn.com/fb2/t1/G6/M00/E5/0C/Cii-U17vnuqASUedAmYek5U84kc46.json"
const Baltic_Squad_KillGroggyBluezone = 
 "http://m.tuniucdn.com/fb2/t1/G6/M00/D5/CB/Cii-TF7c_wCIFmrLAFnzxAm__rQAANE7ALi-ewAWfPc60.json"
const DihorOtok_Main_Squad_KillGroggyBluezone = 
"http://m.tuniucdn.com/fb2/t1/G6/M00/DE/1C/Cii-TF7mTcSITO92AKSWveCWrQMAANKVwAAAAAApJbV77.json"
const MAP_IMAGES = {
  Vikendi:
    "http://n1-q.mafengwo.net/s16/M00/1F/16/CoUBUl6J6-WAfTq9ABN1dkMMLI4971.jpg#DihorOtok_Main",
  "Erangel (Remastered)":
    "http://n1-q.mafengwo.net/s16/M00/24/CD/CoUBUl6J8CGAZ8FWACwGssFmNzs911.jpg#Baltic_Main.jpg.jpg",
  Miramar:
    "http://b1-q.mafengwo.net/s16/M00/25/07/CoUBUl6J8DuABPwhAB3VGbsEWx0692.jpg#Desert_Main.jpg.jpg",
  Erangel:
  
    "http://n1-q.mafengwo.net/s16/M00/25/14/CoUBUl6J8E-AbIDmABcvo6NWiPE512.jpg#Erangel_Main.jpg.jpg",
  Sanhok:
    "http://p1-q.mafengwo.net/s16/M00/25/2E/CoUBUl6J8HWAB3mbABe2H5mDyy8107.jpg#Savage_Main.jpg.jpg"
};
const MAP_LENGTH_CENTIMETERS = {
  Vikendi: 612000,
  "Erangel (Remastered)": 816000,
  Miramar: 816000,
  Erangel: 816000,
  Sanhok: 408000
};

const MAP_NAME = "Sanhok";

const toScale = (pubgMapSize, mapSize, n) =>
  (n / pubgMapSize) * mapSize * (pubgMapSize === 816000 ? 0.99609375 : 1);

const DRAW_MAP_SIZE = 1200;
export default {
  name: "KonvaDesertKill",
  data() {
    return {
      mapSize: DRAW_MAP_SIZE,
      stageConfig: {
        width: DRAW_MAP_SIZE,
        height: DRAW_MAP_SIZE,
        draggable: true
      },
      mapName: MAP_NAME,
      mapImageLink: MAP_IMAGES[MAP_NAME],
      mapImage: (_ => {
        let img = new window.Image();
        img.src = MAP_IMAGES[MAP_NAME];
        return img;
      })(),
      mapScale: 1,
      offsetX: 0,
      offsetY: 0
    };
  },
  computed: {},
  components:{
    EventTime,GridKillHeatmap,GridSafezoneHeatmap,KillInZone,EchartsRadar,EchartsRadarVone,
    EchartsPlayerRoutes,EchartsTraclus,
    Cluster0920,
    ParallelAxis,
    HangxianJuli,
    Touying,
    Poi,
    PoiTsneTrans
  },
  async mounted() {
    return
    let o_killevs = await this.getKillInDesertSquad();
    // debugger;
    // return;
    let killers_positions = o_killevs.DIE_EVS.map(
      e => e.killer.location
    ).concat(o_killevs.GROGGY_EVS.map(e => e.attacker.location));
    let victims_positions = o_killevs.DIE_EVS.map(
      e => e.victim.location
    ).concat(o_killevs.GROGGY_EVS.map(e => e.victim.location));
    // debugger;
    // return;
    let killer_points = killers_positions.map(loc => {
      let mapSize = DRAW_MAP_SIZE;
      let rawMapSize = MAP_LENGTH_CENTIMETERS[MAP_NAME];
      let _scale = mapSize / rawMapSize;
      let xy = [loc.x * _scale, loc.y * _scale];
      let circle = new konva.Circle({
        x: xy[0],
        y: xy[1],
        radius: 2,
        fill: "rgba(255,0,51,0.5)",
        stroke: "black",
        strokeWidth: 0
      });
      return circle;
    });
    let victim_points = victims_positions.map(loc => {
      let mapSize = DRAW_MAP_SIZE;
      let rawMapSize = MAP_LENGTH_CENTIMETERS[MAP_NAME];
      let _scale = mapSize / rawMapSize;
      let xy = [loc.x * _scale, loc.y * _scale];
      let circle = new konva.Star({
        x: xy[0],
        y: xy[1],
        numPoints: 4,
        innerRadius: 1,
        outerRadius: 4,
        fill: "rgba(105,255,255,0.5)",
        stroke: "black",
        strokeWidth: 0
      });
      return circle;
    });
    let attacker_and_victims_pairs = (() => {
      let in_dies = o_killevs.DIE_EVS.map(e => {
        return {
          attacker: e.killer.location,
          victim: e.victim.location
        };
      });
      let in_groggy = o_killevs.GROGGY_EVS.map(e => {
        return {
          attacker: e.attacker.location,
          victim: e.victim.location
        };
      });
      return in_dies
        .concat(in_groggy)
        .filter(e => e.attacker.x && e.attacker.y);
    })();
    let arrows = attacker_and_victims_pairs.map(e => {
      let mapSize = DRAW_MAP_SIZE;
      let rawMapSize = MAP_LENGTH_CENTIMETERS[MAP_NAME];
      let _scale = mapSize / rawMapSize;

      let killer_loc = e.attacker;
      let victim_loc = e.victim;
      // debugger;
      let xy = [killer_loc.x, killer_loc.y, victim_loc.x, victim_loc.y];
      xy = xy.map(n => n * _scale);
      let arr = new konva.Arrow({
        points: xy,
        fill: "rgba(255,255,255,0.5)",
        pointerLength: 1,
        pointerWidth: 1,
        stroke: "rgba(255,255,255,0.5)",
        strokeWidth: 1
      });
      return arr;
    });
    let zoneCircles = o_killevs.SAFETY_ZONES.filter(
      e => e.safetyZoneRadius <= 30000
    ).map(e => {
      let mapSize = DRAW_MAP_SIZE;
      let rawMapSize = MAP_LENGTH_CENTIMETERS[MAP_NAME];
      let _scale = mapSize / rawMapSize;
      let xy = [e.safetyZonePosition.x, e.safetyZonePosition.y].map(
        v => v * _scale
      );
      let radius = e.safetyZoneRadius * _scale;
      return new konva.Circle({
        x: xy[0],
        y: xy[1],
        radius: radius,
        fill: "rgba(255,0,51,0.1)",
        stroke: "rgba(0,204,251,0)",
        strokeWidth: 1
      });
    });
    let heatCircles = o_killevs.SAFETY_ZONES.filter(e => e.safetyZoneRadius <= 30000)
    .map(e=>{
      let mapSize = DRAW_MAP_SIZE;
      let rawMapSize = MAP_LENGTH_CENTIMETERS[MAP_NAME];
      let _scale = mapSize / rawMapSize;
      let xy = [e.safetyZonePosition.x, e.safetyZonePosition.y].map(
        v => v * _scale
      );
      let radius = e.safetyZoneRadius * _scale;
      let circle = new konva.Circle({
         x: xy[0],
        y: xy[1],
        radius: radius,
        strokeWidth:0,

      })
    })
    // debugger
    let v_layer = this.$refs["lines-layer"];
    /**@type {konva.Layer} */
    let layer = v_layer.getNode();
    // layer.add(...killer_points);
    // layer.add(...victim_points);
    // layer.add(...arrows);
    layer.add(...zoneCircles);
    layer.draw();

    const MIN_SCALE = 1;
    const MAX_SCALE = 50;
    let v_stage = this.$refs["ref-stage"];
    /**@type {konva.Stage} */
    let stage = v_stage.getNode();
    let v = this;

    let handleZoom =
      /**
       * @param {Number} scaleDelta
       * @param {Number} layerX?
       * @param {Number} layerY?
       */
      (scaleDelta, layerX, layerY) => {
        if (!layerX) layerX = DRAW_MAP_SIZE / 2;
        if (!layerY) layerY = DRAW_MAP_SIZE / 2;
        let newScale = clamp(v.mapScale * scaleDelta, MIN_SCALE, MAX_SCALE);
        let mousePointX = layerX / v.mapScale - v.offsetX / v.mapScale;
        let mousePointY = layerY / v.mapScale - v.offsetY / v.mapScale;
        let offsetX = -(mousePointX - layerX / newScale) * newScale;
        let offsetY = -(mousePointY - layerY / newScale) * newScale;
        offsetX = clamp(offsetX, -(newScale - 1) * DRAW_MAP_SIZE, 0);
        offsetY = clamp(offsetY, -(newScale - 1) * DRAW_MAP_SIZE, 0);
        // debugger
        v.mapScale = newScale;
        v.offsetX = offsetX;
        v.offsetY = offsetY;
        // debugger;
        stage.scaleX(newScale);
        stage.scaleY(newScale);
        stage.x(offsetX);
        stage.y(offsetY);
        stage.batchDraw();
      };
    stage.dragBoundFunc(pos => {
      // debugger;
      let { x, y } = pos;
      x = clamp(x, -(this.mapScale - 1) * DRAW_MAP_SIZE, 0);
      y = clamp(y, -(this.mapScale - 1) * DRAW_MAP_SIZE, 0);
      return {
        x,
        y
      };
    });
    stage.on("dragend", ev => {
      // debugger
      let x = ev.target.x();
      let y = ev.target.y();
      x = clamp(x, -(this.mapScale - 1) * DRAW_MAP_SIZE, 0);
      y = clamp(y, -(this.mapScale - 1) * DRAW_MAP_SIZE, 0);
      stage.x(x);
      stage.y(y);
      stage.batchDraw();
    });
    stage.on("wheel", ev => {
      console.log(ev);
      ev.evt.preventDefault();
      const scaleDelta = ev.evt.deltaY > 0 ? 1 / 1.2 : 1.2;
      handleZoom(scaleDelta, ev.evt.layerX, ev.evt.layerY);
    });
    // debugger;
  },
  methods: {
    getKillInDesertSquad() {
      return new Promise(resolve => {
        axios
          .get(Savage_Main_Squad_KillGroggyBluezone_II)
          .then(axresp => {
            resolve(axresp.data);
          })
          .catch(axerr => {
            debugger;
          });
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@mapSize: 800px;
.the-map-component {
  // display: flex;
  #map {
    width: @mapSize;
    height: @mapSize;
  }
  .h-check-players {
  }
}
</style>
